﻿/// <reference path="jquery-1.7.1.js" />

//////////////////////////////////////////////////////////////////////////
// AralNovel System Menu
//////////////////////////////////////////////////////////////////////////

function ANSysmenu(_novel) {
	this.novel = _novel;

	var _this = this;
	var _isSystemMode = false;
	var _isSaveMode = false;
	var _isLoadMode = false;
	var _isConfigMode = false;
	var _isAnimating = false;
	var _showIcon = true;
	var _elemSysmenuIcon = null;
	var _arrHandlerStack = [];
	var _saveScreenTopColor = "#aa6677";
	var _saveScreenBottomColor = "#dd99aa"; //"#ffbbcc";
	var _loadScreenTopColor = "#6677aa";
	var _loadScreenBottomColor = "#99aadd"; //"#bbccff";
	var _configScreenTopColor = "#997744";
	var _configScreenBottomColor = "#ccaa77"; //"#bbccff";
	
	// JQuery-UI
	AN_CreateCssRule(".ui-state-default", "border: 1px solid #cdc3b7; background: #ede4d4 url(http://www.arallab.com/aralnovel/img/ui-bg_glass_70_ede4d4_1x400.png) 50% 50% repeat-x; font-weight: normal; color: #3f3731;");
	AN_CreateCssRule(".ui-widget", "font-family: Verdana,Arial,sans-serif; font-size: 1.1em;");
	AN_CreateCssRule(".ui-widget-content", "border: 1px solid #e0cfc2; background: #f4f0ec url(http://www.arallab.com/aralnovel/img/ui-bg_inset-soft_100_f4f0ec_1x100.png) 50% bottom repeat-x; color: #1e1b1d;");

	// Corner radius
	AN_CreateCssRule(".ui-corner-all", "-moz-border-radius-topleft: 16px; -webkit-border-top-left-radius: 16px; -khtml-border-top-left-radius: 16px; border-top-left-radius: 16px;");
	AN_CreateCssRule(".ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr", "-moz-border-radius-topright: 16px; -webkit-border-top-right-radius: 16px; -khtml-border-top-right-radius: 16px; border-top-right-radius: 16px;");
	AN_CreateCssRule(".ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl", "-moz-border-radius-bottomleft: 16px; -webkit-border-bottom-left-radius: 16px; -khtml-border-bottom-left-radius: 16px; border-bottom-left-radius: 16px;");
	AN_CreateCssRule(".ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br", "-moz-border-radius-bottomright: 16px; -webkit-border-bottom-right-radius: 16px; -khtml-border-bottom-right-radius: 16px; border-bottom-right-radius: 16px;");

	// JQuery-UI slider
	AN_CreateCssRule(".ui-slider", "position: relative; text-align: left;");
	AN_CreateCssRule(".ui-slider .ui-slider-handle", "position: absolute; z-index: 2; width:32px; height:32px; cursor: default;");
	AN_CreateCssRule(".ui-slider-horizontal", "height: .8em;");
	AN_CreateCssRule(".ui-slider-horizontal .ui-slider-handle", "top:-10px; margin-left:-16px; cursor: pointer;");

	
	/////////////////////////////////
	// Initialize system menu layer
	_this.novel.layers["system"] = $("<div></div>").appendTo(_this.novel.viewportElement).css({
		zIndex: 700,
		position: "absolute",
		padding: 0,
		margin: 0,
		left: 0,
		top: 0,
		width: "100%",
		height: "100%",
		backgroundColor: "#111",
		overflow: "hidden",
		display: "none",
		opacity: 0.9
	});
	//_this.novel.layers["system"].data("firstOpacity", 0.9);

	AN_CreateHorizontalGradationCssRule(".systemButtonLeft", 42, 102, 64, 0, 1);
	var hexBackColor = AN_RGBAToHexString(42, 102, 64, 1).substr(2);
	function createTextButtonElement(x, y, width, height, txt) {
		return $("<div></div>").css({
			position: "absolute",
			padding: 0,
			margin: 0,
			left: x,
			top: y,
			width: width + "px",
			height: height + "px",
			cursor: "pointer"
		})
		.data("left", x)
		.data("top", y)
		.append("<div class='systemButtonLeft' style='left:0;width:80px;height:" + height + "px;position:absolute;'></div>")
		.append("<div style='left:80px;width:" + (width - 80) + "px;height:" + (height - 20) + "px;padding-top:10px;padding-bottom:10px;position:absolute;line-height:44px;font-size:40px;color:White;font-family:Arial;font-weight:bold;background-color:#" + hexBackColor + ";'>" + txt + "</div>");
	}
	
	function createIconButtonElement(x, y, width, height, src) {
		return $("<div></div>")
			.css({
				position: "absolute",
				padding: 0,
				margin: 0,
				left: x + "px",
				top: y + "px",
				width: width + "px",
				height: height + "px"
				//backgroundImage: "url(" + src + ")",
				//cursor: "pointer"
			})
			//.attr("src", src)
			//.append("<img src='" + src + "' width='" + width + "' height='" + height  + "' style='z-index:1;background-color:;' />");
	}



	// System Button
	var _elemSysmenuIcon = createIconButtonElement(_this.novel.layers["bg"].width() - 64, 0, 64, 64, "http://www.arallab.com/aralnovel/img/icon_System.png");
	_elemSysmenuIcon.appendTo(_this.novel.viewportElement)
		.css("zIndex", 1000)
		.append(
			$("<div></div>")
			.css({
				position: "absolute",
				zIndex: 2,
				backgroundImage: "url(" + "http://www.arallab.com/aralnovel/img/icon_System.png" + ")",
				//backgroundColor: "red",
				padding: 0,
				margin: 0,
				left: 0,
				top: 0,
				width: "100%",
				height: "100%",
				cursor: "pointer"
			})
			.click(function (event) {
				var a = 10;
				if (event.which == 1
					|| (event.which == 0 && $.browser.msie)) // && $.browser.version == "6.0")) 
				{
					if (_isAnimating == false) {
						if (_isSaveMode) _this.showSaveScreen(false);
						else if (_isLoadMode) _this.showLoadScreen(false);
						else if (_isConfigMode) _this.showConfigScreen(false);
						else _this.showSystemScreen(!_isSystemMode);
					}
					return false;
				}
			})
		);

	// Save button
	var _elemSaveIcon = createTextButtonElement(_this.novel.layers["bg"].width() - 220, 80, 350, 64, "SAVE");
	_elemSaveIcon.appendTo(_this.novel.layers["system"])
				.addClass("_AN_SysmenuItem")
				.click(function (event) {
					_this.showSaveScreen(true);
					return false;
				})
	;

	// Load button
	_elemLoadIcon = createTextButtonElement(_this.novel.layers["bg"].width() - 250, 160, 350, 64, "LOAD");
	_elemLoadIcon.appendTo(_this.novel.layers["system"])
				.addClass("_AN_SysmenuItem")
				.click(function (event) {
					_this.showLoadScreen(true);
					return false;
				})
	;


	// New button
	var _elemNewIcon = createTextButtonElement(_this.novel.layers["bg"].width() - 280, 240, 350, 64, "NEW");
	_elemNewIcon.appendTo(_this.novel.layers["system"])
				.addClass("_AN_SysmenuItem")
				.click(function (event) {
					if (confirm("Restart the game?")) {
						_this.novel.newGame();
						return true;
					}

					return false;
				})
	;

	// Config button
	var _elemConfigIcon = createTextButtonElement(_this.novel.layers["bg"].width() - 310, 320, 350, 64, "CONFIG");
	_elemConfigIcon.appendTo(_this.novel.layers["system"])
	.addClass("_AN_SysmenuItem")
	.click(function (event) {
		_this.showConfigScreen(true);
		return false;
	});

	////////////////////////////////////////
	// Switch system-menu layer
	this.showSystemScreen = function (flag) {
		if (flag == _isSystemMode) return;

		// Show System Menu
		if (flag) {
			// Animation
			_isAnimating = true;
			var lastIdx = _this.novel.layers["system"].children("._AN_SysmenuItem").length - 1;

			if ($.browser.msie && $.browser.version == "8.0") {
				// Animation doesn't work correctly in IE8 
				_this.novel.layers["system"].fadeIn(400, function () { _isAnimating = false; });
			}
			else {
				_this.novel.layers["system"].fadeIn(400).children("._AN_SysmenuItem").each(function (idx) {
					var screenWidth = _this.novel.layers["system"].width();
					var jqItem = $(this);
					var aniOpt = { duration: 200 + idx * 10 };
					if (idx == lastIdx) aniOpt["complete"] = function () { _isAnimating = false; };

					jqItem.css({ left: screenWidth, top: jqItem.data("top") })
			.animate({ left: jqItem.data("left") - 20 }, 300 + idx * 80)
			.animate({ left: jqItem.data("left") }, aniOpt);
				});
			}

			// Backup Input Handlers
			_arrHandlerStack.push(_this.novel.input.onMouseClick);
			_arrHandlerStack.push(_this.novel.input.onMouseScroll);
			_this.novel.input.onMouseClick = function () {
				_this.showSystemScreen(false);
			};
			_this.novel.input.onMouseScroll = function () { };
			_this.novel.script.pause();
		}
		// Hide System Menu
		else {
			// Animation
			_isAnimating = true;
			_this.novel.layers["system"].fadeOut(400, function () { _isAnimating = false; });

			// Restore Input Handlers
			if (_arrHandlerStack.length > 0) _this.novel.input.onMouseScroll = _arrHandlerStack.pop();
			if (_arrHandlerStack.length > 0) _this.novel.input.onMouseClick = _arrHandlerStack.pop();
			_this.novel.script.resume();

			// Save config data
			_this.novel.saveConfigData();
		}

		_isSystemMode = flag;

	}      // end of showSystemScreen()

	////////////////////////////////////////
	// Return whether system menu is activated or not now
	this.isShowing = function () {
		return (_isSystemMode || _isSaveMode || _isLoadMode || _isConfigMode);
	}

	////////////////////////////////////////
	// Menu Icon Visible
	this.showIcon = function (bShow) {
		if (_isSystemMode == false) {
			_elemSysmenuIcon[(bShow ? "fadeIn" : "fadeOut")](300);
			_showIcon = bShow;
		}
	}


	////////////////////////////////////////
	// Initialize Save/Load layer
	_this.novel.layers["saveload"] = $("<div></div>").appendTo(_this.novel.viewportElement).css({
		zIndex: 710,
		position: "absolute",
		padding: 0,
		margin: 0,
		left: 0,
		top: 0,
		width: "100%",
		height: "100%",
		backgroundColor: "#fff",
		overflow: "hidden",
		opacity: 0.95,
		display: "none"
	}).append(
		$("<div></div>").addClass("saveloadTop").css({
			position: "relative",
			padding: 0,
			margin: 0,
			left: 0,
			top: 0,
			color: "#fff",
			textAlign: "left",
			width: "100%",
			height: "64px",
			padding: "0px",
			lineHeight: "64px",
			fontSize: "44px",
			fontWeight: "bold",
			overflow: "hidden"
		})
	).append(
		$("<div></div>").addClass("slots").css({
			position: "relative",
			padding: 0,
			margin: 0,
			left: 0,
			top: 0,
			color: "#fff",
			textAlign: "left",
			width: "100%",
			height: $(_this.novel.viewportElement).height() - 108,
			overflowY: "scroll",
			overflowX: "hidden"
		})
	).append(
		$("<div></div>").addClass("saveloadBottom").css({
			position: "relative",
			padding: 0,
			margin: 0,
			left: 0,
			top: 0,
			textAlign: "right",
			width: "100%",
			height: "44px",
			lineHeight: "44px",
			overflow: "hidden"
		}).append(
			$("<span>BACK</span>").addClass("backButton").css({
				position: "relative",
				padding: "0px",
				margin: 0,
				height: "44px",
				cursor: "pointer",
				color: "#fff",
				textAlign: "right",
				lineHeight: "44px",
				fontSize: "30px",
				fontWeight: "bold"
			}).click(function (event) {
				if (event.which == 1
							|| (event.which == 0 && $.browser.msie)) // && $.browser.version == "6.0")) 
				{
					_this.showSaveScreen(false);
					_this.showLoadScreen(false);
					return false;
				}
			})
		)
	);

	//AN_CreateHorizontalGradationCssRule(".saveScreenTopGradation", 170, 102, 119, 1, 0.5);
	//AN_CreateHorizontalGradationCssRule(".saveScreenBottomGradation", 221, 153, 170, 0.5, 1);

	////////////////////////////////////////
	// Switch Save layer
	this.showSaveScreen = function (flag) {
		if (flag == _isSaveMode) return;

		// Show save screen
		if (flag) {

			_this.novel.layers["saveload"].children(".saveloadTop").html("SAVE").css("backgroundColor", _saveScreenTopColor);
			_this.novel.layers["saveload"].children(".saveloadBottom").css({
				backgroundColor: _saveScreenBottomColor,
				borderTop: "solid 4px " + _saveScreenTopColor
			}); // [0].className = "saveScreenBottomGradation";
			
			refreshSaveSlots(true);

			// Animation
			_isAnimating = true;
			_this.novel.layers["saveload"].fadeIn(400, function () { _isAnimating = false; });

			// Backup Input Handlers
			_arrHandlerStack.push(_this.novel.input.onMouseClick);
			_arrHandlerStack.push(_this.novel.input.onMouseScroll);
			_this.novel.input.onMouseClick = function (x, y, btn) {
				if (btn == 3) _this.showSaveScreen(false);
			};
			_this.novel.input.onMouseScroll = function () {
			};
		}
		// Hide save screen
		else {
			// Animation
			_isAnimating = true;
			_this.novel.layers["saveload"].fadeOut(400, function () { _isAnimating = false; });

			// Restore Input Handlers
			if (_arrHandlerStack.length > 0) _this.novel.input.onMouseScroll = _arrHandlerStack.pop();
			if (_arrHandlerStack.length > 0) _this.novel.input.onMouseClick = _arrHandlerStack.pop();
		}

		_isSaveMode = flag;

	}      // end of showSaveScreen()

	////////////////////////////////////////
	// Switch Load layer
	this.showLoadScreen = function (flag) {
		if (flag == _isLoadMode) return;

		// Show Load screen
		if (flag) {

			_this.novel.layers["saveload"].children(".saveloadTop").html("LOAD").css("backgroundColor", _loadScreenTopColor);
			_this.novel.layers["saveload"].children(".saveloadBottom").css({
				backgroundColor: _loadScreenBottomColor,
				borderTop: "solid 4px " + _loadScreenTopColor
			});
			
			refreshSaveSlots(false);

			// Animation
			_isAnimating = true;
			_this.novel.layers["saveload"].fadeIn(400, function () { _isAnimating = false; });

			// Backup Input Handlers
			_arrHandlerStack.push(_this.novel.input.onMouseClick);
			_arrHandlerStack.push(_this.novel.input.onMouseScroll);
			_this.novel.input.onMouseClick = function (x, y, btn) {
				if (btn == 3) _this.showLoadScreen(false);
			};
			_this.novel.input.onMouseScroll = function () {
			};
		}
		// Hide Load screen
		else {
			// Animation
			_isAnimating = true;
			_this.novel.layers["saveload"].fadeOut(400, function () { _isAnimating = false; });

			// Restore Input Handlers
			if (_arrHandlerStack.length > 0) _this.novel.input.onMouseScroll = _arrHandlerStack.pop();
			if (_arrHandlerStack.length > 0) _this.novel.input.onMouseClick = _arrHandlerStack.pop();
		}

		_isLoadMode = flag;

	}    // end of showLoadScreen()

	function refreshSaveSlots(forSave) {

		function drawSlotUsingSaveScript($slot, strScript) {
			var $thumb = $($slot.find("td")[0]);
			var $summ = $($slot.find("td")[1]);

			if (strScript == "") {
				$thumb.html("<div style='width:150px;height:100px;background-color:#eee;'></div>");
				$summ.html("<span style='font-size:22px;'>EMPTY</span>");
			}
			else {
				var saveBG = undefined;
				var saveDateTime = "----/--/-- --:--:--";
				var saveText = "";

				if( (/.*\/\*metadata-bg:(.*):metadata-bg\*\/.*/).test(strScript) )
					saveBG = strScript.replace(/[\r\n]/g, "").replace(/.*\/\*metadata-bg:(.*):metadata-bg\*\/.*/, "$1");
				if( (/.*\/\*metadata-datetime:(.*):metadata-datetime\*\/.*/).test(strScript) )
					saveDateTime = strScript.replace(/[\r\n]/g, "").replace(/.*\/\*metadata-datetime:(.*):metadata-datetime\*\/.*/, "$1");
				if( (/.*\/\*metadata-text:(.*):metadata-text\*\/.*/).test(strScript) )
					saveText = strScript.replace(/[\r\n]/g, "").replace(/.*\/\*metadata-text:(.*):metadata-text\*\/.*/, "$1");

				if (saveBG && saveBG != "undefined") {
					$thumb.html("<img width='150' height='100' src='" + saveBG + "' style='border:solid 1px #333;'>");
				}
				else {
					$thumb.html("<div style='width:150px;height:100px;background-color:#000;'></div>");
				}
				$summ.html("<div style='width:100%;height:100px;overflow:hidden;text-align:left;font-weight:bold;line-height:24px;font-size:20px;'>"
						+"<span style='font-size:22px;'>" + saveDateTime + "</span><br/>" + saveText + "<div>");
			}			
		}
		
		var divSlots = _this.novel.layers["saveload"].children(".slots");
		var keyPrefix = "AralNovelSaveData_" + _this.novel.hash + "_";

		var mainColor = (forSave ? _saveScreenBottomColor : _loadScreenBottomColor);
		var secondaryColor = (forSave ? _saveScreenTopColor : _loadScreenTopColor);

		divSlots.empty();

		for (var i = 0; i < _this.novel.storages.length; i++) {
			var strg = _this.novel.storages[i];
			var slotIdx = 0;
			var totalSlotCnt = 0;
			var validSlotCnt = 0;
			var $strgTitle = $("<div>" + strg.storageName + "</div>").appendTo(divSlots)
				.css({
					padding: "5px 0px",
					margin: "5px auto",
					width: "95%",
					color: "#fff",
					backgroundColor: strg.storageColor,
					fontSize: "22px",
					fontWeight: "bold",
					textAlign: "center"
				});

			//while (strg.has(keyPrefix + slotIdx)) {
			//	strg.remove(keyPrefix + slotIdx);
			//	slotIdx++;
				//return;
			//}
			//slotIdx = 0;

			if (strg.errorDescription != undefined) {
				$strgTitle.append("<br/>" + strg.errorDescription);
				continue;
			}

			while (strg.has(keyPrefix + slotIdx) || (totalSlotCnt - validSlotCnt < 5)) {
				var saveData = strg.read(keyPrefix + slotIdx);
				
				// Create an empty slot
				if (saveData == null) {
					strg.write(keyPrefix + slotIdx, "");
					saveData = "";
				}
				else if (saveData != "") {
					validSlotCnt++;
				}
				totalSlotCnt++;

				// Parse meta-data
				var $oneSlot = $("<table cellpadding=0 cellspacing=0 border=0></table>").appendTo(divSlots)
					.css({
						tableLayout: "fixed",
						padding: 0,
						margin: "5px auto",
						width: "95%",
						height: 110,
						cursor: "pointer",
						border: "solid 1px " + secondaryColor,
						overflow: "hidden"
					})
					.append($("<tr></tr>").css({ backgroundColor: mainColor }));
				var $tdThumbnail = $("<td align=center valign=middle></td>").appendTo($oneSlot.find("tr"))
					.css({
						margin: 0,
						padding: 0,
						width: 160,
						height: 110,
						//border: "solid 1px black",
						//backgroundColor: "#fff"
						wordBreak: "break-all",
						overflow: "hidden"
					});
					var $tdSummary = $("<td align=center valign=middle></td>").appendTo($oneSlot.find("tr"))
					.css({
						margin: 0,
						padding: "5px",
						width: $oneSlot.width() - 190,
						height: 110,
						wordBreak: "break-all",
						color: "#fff",
						//border: "solid 1px black",
						overflow: "hidden"
					});

				drawSlotUsingSaveScript($oneSlot, saveData);

				$oneSlot[0].ANSaveStorage = strg;
				$oneSlot[0].ANSaveKey = keyPrefix + slotIdx;
				$oneSlot[0].ANSaveExists = (saveData != "");
				if (forSave) {
					$oneSlot.click(function (event) {
						if (event.which == 1
							|| (event.which == 0 && $.browser.msie))
						{
							if (!this.ANSaveStorage || !this.ANSaveKey) return false;
							if (this.ANSaveExists && confirm("Existing data will be overwritten.\r\nContinue?") == false) return false;

							var strSaveScript = _this.novel.getSaveScript();
							this.ANSaveStorage.write(this.ANSaveKey, strSaveScript);
							this.ANSaveExists = true;
							drawSlotUsingSaveScript($(this), strSaveScript);
							//_this.novel.layers["saveload"].animate({left: 0}, 1000); // delay
							//_this.showSaveScreen(false);
							return false;
						}
					});
				}
				else {
					$oneSlot.click(function (event) {
						if (event.which == 1
							|| (event.which == 0 && $.browser.msie)) {
							if (!this.ANSaveStorage || !this.ANSaveKey || !this.ANSaveExists) return false;
							if (confirm("Do you want to load this data?") == false) return false;

							var strLoadScript = this.ANSaveStorage.read(this.ANSaveKey);
							_this.novel.executeLoadScript(strLoadScript);
							//_this.novel.layers["saveload"].animate({left: 0}, 1000); // delay
							_this.showLoadScreen(false);
							_this.showSystemScreen(false);
							return false;
						}
					});
				}

				slotIdx++;
			}

		}   // end of refreshSaveSlots()
	}



	////////////////////////////////////////
	// Initialize Config layer
	_this.novel.layers["config"] = $("<div></div>").appendTo(_this.novel.viewportElement).css({
		zIndex: 720,
		position: "absolute",
		padding: 0,
		margin: 0,
		left: 0,
		top: 0,
		width: "100%",
		height: "100%",
		backgroundColor: "#fff",
		overflow: "hidden",
		//opacity: 0.95,
		display: "none"
	}).append(
		$("<div></div>").addClass("configTop")
		.html("CONFIG")
		.css({
			position: "relative",
			padding: 0,
			margin: 0,
			left: 0,
			top: 0,
			color: "#fff",
			textAlign: "left",
			width: "100%",
			height: "64px",
			padding: "0px",
			lineHeight: "64px",
			fontSize: "44px",
			fontWeight: "bold",
			overflow: "hidden",
			backgroundColor: _configScreenTopColor
		})
	).append(
		$("<div></div>").addClass("configComponents")
		.css({
			position: "relative",
			padding: 0,
			margin: 0,
			left: 0,
			top: 0,
			color: "#fff",
			textAlign: "left",
			overflow: "hidden"
		})

	)
	.append(
		$("<div></div>").addClass("configBottom").css({
			position: "relative",
			padding: 0,
			margin: 0,
			left: 0,
			top: 0,
			textAlign: "right",
			width: "100%",
			height: "44px",
			lineHeight: "44px",
			overflow: "hidden",
			backgroundColor: _configScreenBottomColor,
			borderTop: "solid 4px " + _configScreenTopColor
		}).append(
			$("<span>BACK</span>").addClass("backButton").css({
				position: "relative",
				padding: "0px",
				margin: 0,
				height: "44px",
				cursor: "pointer",
				color: "#fff",
				textAlign: "right",
				lineHeight: "44px",
				fontSize: "30px",
				fontWeight: "bold"
			}).click(function (event) {
				if (event.which == 1
							|| (event.which == 0 && $.browser.msie)) // && $.browser.version == "6.0")) 
				{
					_this.showConfigScreen(false);
					return false;
				}
			})
		)
	);

	//AN_CreateHorizontalGradationCssRule(".saveScreenTopGradation", 170, 102, 119, 1, 0.5);
	//AN_CreateHorizontalGradationCssRule(".saveScreenBottomGradation", 221, 153, 170, 0.5, 1);

	////////////////////////////////////////
	// Switch Config layer
	this.showConfigScreen = function (flag) {
	if (flag == _isConfigMode) return;

	// Show Config screen
	if (flag) {

		//_this.novel.layers["config"].children(".configTop").html("CONFIG").css("backgroundColor", _saveScreenTopColor);
		//_this.novel.layers["config"].children(".configBottom").css({
		//	backgroundColor: _saveScreenBottomColor,
		//	borderTop: "solid 4px " + _saveScreenTopColor
		//}); // [0].className = "saveScreenBottomGradation";

		//refreshSaveSlots(true);
		var $divComponents = _this.novel.layers["config"].children(".configComponents");
		$divComponents.empty().css({
			textAlign: "center",
			width: "100%",
			height: $(_this.novel.viewportElement).height() - 108
		});

		// Layout Table
		var $tableLayout = $("<table cellpadding=0 cellspacing=0 border=0></table>")
		.appendTo($divComponents)
		.css({
			position: "relative",
			padding: 0,
			margin: "20px auto",
			//color: _configScreenTopColor,
			//textAlign: "left",
			width: 580,
			//height: 50,
			//lineHeight: "36px",
			//fontSize: "32px",
			//fontWeight: "bold",
			overflow: "hidden"
		});


		// Text Speed
		$("<tr></tr>").appendTo($tableLayout)
			.append(
				$("<td align='left' valign='middle'>Text Speed</td>")
				.appendTo($divComponents)
				.css({
					color: _configScreenTopColor,
					textAlign: "left",
					width: 220,
					height: 60,
					lineHeight: "32px",
					fontSize: "30px",
					fontWeight: "bold",
					overflow: "hidden"
				})
			)
			.append(
				$("<td align='right' valign='middle'>Slow</td>")
				.css({
					lineHeight: "32px",
					fontSize: "24px",
					color: "#888",
					width: 60
				})
			).append(
				$("<td align='center' valign='middle'></td>")
				.css({
					width: 240
				}).append(
					$("<div style='width:200px;height:12px;'></div>")
					.slider({
						value: _this.novel.config.textSpeed,
						change: function (event, ui) {
							_this.novel.config.textSpeed = $(this).slider("value");
						}
					})
				)
			).append(
				$("<td align='left' valign='middle'>Fast</td>")
				.css({
					lineHeight: "32px",
					fontSize: "24px",
					color: "#888",
					width: 60
				})
			);


			// BGM Volume
			$("<tr></tr>").appendTo($tableLayout)
			.append(
				$("<td align='left' valign='middle'>BGM Volume</td>")
				.appendTo($divComponents)
				.css({
					color: _configScreenTopColor,
					textAlign: "left",
					height: 60,
					lineHeight: "32px",
					fontSize: "30px",
					fontWeight: "bold",
					overflow: "hidden"
				})
			).append(
				$("<td align='right' valign='middle'>Min</td>")
				.css({
					lineHeight: "32px",
					fontSize: "24px",
					color: "#888"
				})
			)
			.append(
				$("<td align='center' valign='middle'></td>")
				.css({
					width: 240
				}).append(
					$("<div style='width:200px;height:12px;'></div>")
					.slider({
						value: _this.novel.config.bgmVolume,
						slide: function (event, ui) {
							_this.novel.config.bgmVolume = $(this).slider("value");
							_this.novel.bgm.setVolume(_this.novel.bgm.getVolume());
						},
						change: function (event, ui) {
							_this.novel.config.bgmVolume = $(this).slider("value");
							_this.novel.bgm.setVolume(_this.novel.bgm.getVolume());
						}
					})
				)
			)
			.append(
				$("<td align='left' valign='middle'>Max</td>")
				.css({
					lineHeight: "32px",
					fontSize: "24px",
					color: "#888"
				})
			);

					// SE Volume
					$("<tr></tr>").appendTo($tableLayout)
			.append(
				$("<td align='left' valign='middle'>SE Volume</td>")
				.appendTo($divComponents)
				.css({
					color: _configScreenTopColor,
					textAlign: "left",
					height: 60,
					lineHeight: "32px",
					fontSize: "30px",
					fontWeight: "bold",
					overflow: "hidden"
				})
			).append(
				$("<td align='right' valign='middle'>Min</td>")
				.css({
					lineHeight: "32px",
					fontSize: "24px",
					color: "#888"
				})
			).append(
				$("<td align='center' valign='middle'></td>")
				.css({
					width: 240
				}).append(
					$("<div style='width:200px;height:12px;'></div>")
					.slider({
						value: 50,
						change: function (event, ui) {
							//_this.novel.config.bgm = $(this).slider("value");
						}
					})
				)
			).append(
				$("<td align='left' valign='middle'>Max</td>")
				.css({
					lineHeight: "32px",
					fontSize: "24px",
					color: "#888"
				})
			);

			// padding
			$("<tr></tr>").appendTo($tableLayout).append(
				$("<td align='left' valign='middle' colspan='4'>&nbsp</td>")
				.appendTo($divComponents)
				.css({
					color: _configScreenTopColor,
					textAlign: "left",
					height: 50,
					lineHeight: "32px",
					fontSize: "30px",
					fontWeight: "bold",
					overflow: "hidden"
				})
			)

			// Full Screen
			$("<tr></tr>").appendTo($tableLayout).append(
				$("<td align='left' valign='middle'>Full Screen</td>")
				.appendTo($divComponents)
				.css({
					color: _configScreenTopColor,
					textAlign: "left",
					height: 50,
					lineHeight: "32px",
					fontSize: "30px",
					fontWeight: "bold",
					overflow: "hidden"
				})
			)
			.append(
				$("<td align='left' valign='middle' colspan='3'>Not implemented</td>")
				.appendTo($divComponents)
				.css({
					lineHeight: "32px",
					fontSize: "24px",
					fontWeight: "bold",
					textAlign: "left",
					color: "#888",
					width: 50
				})
			);

			// Text Skip
			$("<tr></tr>").appendTo($tableLayout).append(
				$("<td align='left' valign='middle'>Text Skip</td>")
				.appendTo($divComponents)
				.css({
					color: _configScreenTopColor,
					textAlign: "left",
					height: 50,
					lineHeight: "32px",
					fontSize: "30px",
					fontWeight: "bold",
					overflow: "hidden"
				})
			)
			.append(
				$("<td align='left' valign='middle' colspan='3'>Shift + Ctrl</td>")
				.appendTo($divComponents)
				.css({
					lineHeight: "32px",
					fontSize: "24px",
					fontWeight: "bold",
					textAlign: "left",
					color: "#888",
					width: 50
				})
			);

			// Animation
			_isAnimating = true;
			_this.novel.layers["config"].fadeIn(400, function () { _isAnimating = false; });

			// Backup Input Handlers
			_arrHandlerStack.push(_this.novel.input.onMouseClick);
			_arrHandlerStack.push(_this.novel.input.onMouseScroll);
			_this.novel.input.onMouseClick = function (x, y, btn) {
				if (btn == 3) _this.showConfigScreen(false);
			};
			_this.novel.input.onMouseScroll = function () { };
		}
		// Hide Config screen
		else {
			// Animation
			_isAnimating = true;
			_this.novel.layers["config"].fadeOut(400, function () { _isAnimating = false; });

			// Restore Input Handlers
			if (_arrHandlerStack.length > 0) _this.novel.input.onMouseScroll = _arrHandlerStack.pop();
			if (_arrHandlerStack.length > 0) _this.novel.input.onMouseClick = _arrHandlerStack.pop();
		}

		_isConfigMode = flag;

	}              // end of showConfigScreen()

}


//